<template>
  <div class="kaoqing-setting">
    <div class="header">
      <h2>考勤设置</h2>
      <router-link to="/main/renshi/kaoqing">
        <el-button type="primary">返回</el-button>
      </router-link>
    </div>
    <div class="setting-layout">
      <!-- 左侧菜单 -->
      <div class="setting-menu">
        <el-menu
          :default-active="activeMenu"
          class="setting-menu-list"
          @select="handleMenuSelect"
          :unique-opened="true"
        >
          <el-submenu index="kaoqing">
            <template slot="title">
              <i class="el-icon-time"></i>
              <span>考勤设置</span>
            </template>
            <el-menu-item index="kaoqing-group">考勤组设置</el-menu-item>
            <el-menu-item index="bancishezhi">班次设置</el-menu-item>
            <el-menu-item index="renlian">人脸识别</el-menu-item>
            <el-menu-item index="fengzhang">封账设置</el-menu-item>
            <el-menu-item index="yidong">移动端统计</el-menu-item>
            <el-menu-item index="jiejiari">节假日</el-menu-item>
          </el-submenu>
          <el-submenu index="tongji">
            <template slot="title">
              <i class="el-icon-data-line"></i>
              <span>考勤统计</span>
            </template>
            <el-menu-item index="baobiao">报表</el-menu-item>
            <el-menu-item index="yuanshi">原始记录</el-menu-item>
            <el-menu-item index="zuobi">疑似作弊记录</el-menu-item>
            <el-menu-item index="ziduan">字段管理</el-menu-item>
            <el-menu-item index="queren">考勤确认</el-menu-item>
          </el-submenu>
          <el-submenu index="jiaqi">
            <template slot="title">
              <i class="el-icon-date"></i>
              <span>假期管理</span>
            </template>
            <el-menu-item index="jiaqi-type">假期类型</el-menu-item>
            <el-menu-item index="jiaqi-balance">假期余额</el-menu-item>
          </el-submenu>
          <el-submenu index="jiaban">
            <template slot="title">
              <i class="el-icon-alarm-clock"></i>
              <span>加班管理</span>
            </template>
            <el-menu-item index="jiaban-rule">加班规则</el-menu-item>
            <el-menu-item index="jiaban-record">加班记录</el-menu-item>
          </el-submenu>
          <el-submenu index="admin">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span>管理员</span>
            </template>
            <el-menu-item index="admin-setting">管理员设置</el-menu-item>
            <el-menu-item index="admin-config">应用配置</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
      <!-- 右侧内容区 -->
      <div class="setting-content">
        <!-- 考勤设置 -->
        <el-form v-if="activeMenu === 'kaoqing'" :model="settingForm" label-width="120px" class="setting-form">
          <!-- 工作时间设置 -->
          <el-card class="setting-card">
            <div slot="header">
              <span>工作时间设置</span>
            </div>
            <el-form-item label="上班时间">
              <el-time-picker v-model="settingForm.workStartTime" format="HH:mm" placeholder="请选择上班时间" />
            </el-form-item>
            <el-form-item label="下班时间">
              <el-time-picker v-model="settingForm.workEndTime" format="HH:mm" placeholder="请选择下班时间" />
            </el-form-item>
            <el-form-item label="工作日">
              <el-checkbox-group v-model="settingForm.workDays">
                <el-checkbox label="1">周一</el-checkbox>
                <el-checkbox label="2">周二</el-checkbox>
                <el-checkbox label="3">周三</el-checkbox>
                <el-checkbox label="4">周四</el-checkbox>
                <el-checkbox label="5">周五</el-checkbox>
                <el-checkbox label="6">周六</el-checkbox>
                <el-checkbox label="0">周日</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-card>
          <!-- 打卡设置 -->
          <el-card class="setting-card">
            <div slot="header">
              <span>打卡设置</span>
            </div>
            <el-form-item label="打卡时间范围">
              <el-col :span="11">
                <el-form-item label="上班打卡">
                  <el-input-number v-model="settingForm.clockInBeforeMinutes" :min="0" :max="120" label="提前打卡(分钟)" />
                  <span class="time-separator">至</span>
                  <el-input-number v-model="settingForm.clockInAfterMinutes" :min="0" :max="120" label="延后打卡(分钟)" />
                </el-form-item>
              </el-col>
              <el-col :span="11" :offset="2">
                <el-form-item label="下班打卡">
                  <el-input-number v-model="settingForm.clockOutBeforeMinutes" :min="0" :max="120" label="提前打卡(分钟)" />
                  <span class="time-separator">至</span>
                  <el-input-number v-model="settingForm.clockOutAfterMinutes" :min="0" :max="120" label="延后打卡(分钟)" />
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-card>
          <!-- 加班设置 -->
          <el-card class="setting-card">
            <div slot="header">
              <span>加班设置</span>
            </div>
            <el-form-item label="最短加班时长">
              <el-input-number v-model="settingForm.minOvertimeHours" :min="0.5" :max="24" :step="0.5" />
              <span class="unit">小时</span>
            </el-form-item>
            <el-form-item label="加班规则">
              <el-radio-group v-model="settingForm.overtimeRule">
                <el-radio label="1">工作日加班1.5倍工资</el-radio>
                <el-radio label="2">休息日加班2倍工资</el-radio>
                <el-radio label="3">法定节假日加班3倍工资</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-card>
          <!-- 请假设置 -->
          <el-card class="setting-card">
            <div slot="header">
              <span>请假设置</span>
            </div>
            <el-form-item label="请假类型">
              <el-table :data="settingForm.leaveTypes" border style="width: 100%">
                <el-table-column prop="name" label="假期类型">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.name" placeholder="请输入假期类型名称" />
                  </template>
                </el-table-column>
                <el-table-column prop="days" label="年假天数" width="120">
                  <template slot-scope="scope">
                    <el-input-number v-model="scope.row.days" :min="0" :max="365" />
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="120">
                  <template slot-scope="scope">
                    <el-button type="danger" size="mini" @click="handleDeleteLeaveType(scope.$index)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-button style="margin-top: 10px" type="primary" @click="handleAddLeaveType">添加请假类型</el-button>
            </el-form-item>
          </el-card>
          <el-form-item>
            <el-button type="primary" @click="handleSave">保存设置</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>

        <!-- 考勤组设置 -->
        <attendance-group-setting v-if="activeMenu === 'kaoqing-group'" />

        <!-- 班次设置 -->
        <shift-setting v-if="activeMenu === 'bancishezhi'" />

        <!-- 人脸识别 -->
        <face-recognition-setting v-if="activeMenu === 'renlian'" />

        <!-- 原始记录 -->
        <original-record v-if="activeMenu === 'yuanshi'" />
        <!-- 假期类型设置 -->
        <leave-type-setting v-if="activeMenu === 'jiaqi-type'" />

        <!-- 对接设置 -->
        <div v-if="activeMenu === 'duijie'" class="setting-form">
          <h3>对接设置</h3>
          <el-card class="setting-card">
            <div slot="header">
              <span>第三方系统对接</span>
            </div>
            <!-- 这里添加对接设置的具体内容 -->
          </el-card>
        </div>

        <!-- 报表设置 -->
        <report-setting v-if="activeMenu === 'baobiao'" />

        <!-- 移动端统计 -->
        <mobile-statistics-setting v-if="activeMenu === 'yidong'" />

        <!-- 节假日设置 -->
        <holiday-setting v-if="activeMenu === 'jiejiari'" />
      </div>
    </div>
  </div>
</template>

<script>
import ShiftSetting from './ShiftSetting.vue'
import FaceRecognitionSetting from './FaceRecognitionSetting.vue'
import LeaveTypeSetting from './LeaveTypeSetting.vue'
import AttendanceGroupSetting from './AttendanceGroupSetting.vue'
import MobileStatisticsSetting from './MobileStatisticsSetting.vue'
import HolidaySetting from './HolidaySetting.vue'
import ReportSetting from './ReportSetting.vue'
import OriginalRecord from './OriginalRecord.vue'

export default {
  name: 'KaoqingSetting',
  components: {
    ShiftSetting,
    FaceRecognitionSetting,
    LeaveTypeSetting,
    AttendanceGroupSetting,
    MobileStatisticsSetting,
    HolidaySetting,
    ReportSetting,
    OriginalRecord
  },
  data() {
    return {
      activeMenu: 'kaoqing',
      settingForm: {
        workStartTime: new Date(2000, 1, 1, 9, 0),
        workEndTime: new Date(2000, 1, 1, 18, 0),
        workDays: ['1', '2', '3', '4', '5'],
        clockInBeforeMinutes: 30,
        clockInAfterMinutes: 30,
        clockOutBeforeMinutes: 30,
        clockOutAfterMinutes: 120,
        minOvertimeHours: 1,
        overtimeRule: '1',
        leaveTypes: [
          { name: '年假', days: 5 },
          { name: '事假', days: 0 },
          { name: '病假', days: 0 },
          { name: '婚假', days: 3 },
          { name: '产假', days: 98 }
        ]
      }
    }
  },
  methods: {
    handleMenuSelect(index) {
      this.activeMenu = index
    },
    handleAddLeaveType() {
      this.settingForm.leaveTypes.push({
        name: '',
        days: 0
      })
    },
    handleDeleteLeaveType(index) {
      this.settingForm.leaveTypes.splice(index, 1)
    },
    handleSave() {
      // TODO: 调用API保存设置
      this.$message.success('设置保存成功')
    },
    handleReset() {
      // TODO: 重置为默认设置
      this.$confirm('确定要重置所有设置吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.success('设置已重置')
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>
.kaoqing-setting {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.setting-layout {
  display: flex;
  gap: 20px;
  min-height: calc(100vh - 140px);
}

.setting-menu {
  width: 200px;
  background-color: #fff;
  border-right: 1px solid #e6e6e6;
}

.setting-menu-list {
  border-right: none;
}

.setting-content {
  flex: 1;
}

.setting-form {
  max-width: 1200px;
}

.setting-card {
  margin-bottom: 20px;
}

.time-separator {
  margin: 0 10px;
}

.unit {
  margin-left: 10px;
}

.el-card ::v-deep .el-card__header {
  padding: 10px 20px;
  font-weight: bold;
}

.el-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
</style>